<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/jf-info.css" rel="stylesheet">
    <link href="../css/download.css" rel="stylesheet">
        <title>积分换购</title>    
  </head>
  <body>
    <div id="buybox">
        <div class="jf-buy">
            <div class="focus">
                <mt-swipe :auto="4000">
                  <mt-swipe-item v-for="item in url">
                  <img :src="item.picture.path" alt="">
              </mt-swipe-item>

                </mt-swipe>

            </div>
            <div class="title">
                <h4>{{title}}</h4>
                <p>
                    <span><i class="icon-msg"></i> {{commentCount}}</span>
                    <span><i class="icon-broswer"></i> {{viewCount}}</span>
                </p>
            </div>
            <div class="sku">
                <ul>
                    <li class="h_box">
                        <span class="tit">商品分类</span>
                        <p><span class="sku-sel" v-for="item in dataAll.merchandiseClasses" :class="merchandiseClasses == item.id?'cur':''" @click="selectType(item.id,item.stock,item.paidIntegral,item.integral,item)">{{item.argName}}</span></p>
                    </li>
                    <li class="h_box mt25">
                        <span class="tit">选择数量</span><em>(剩余{{stock}}张)</em><p class="textalign" style="width:17rem;">
                            <span class="icon-reduce" @click="changeNum(0)"></span><input v-model="count" value="" class="inputText" readonly type="text"><span class="icon-add" @click="changeNum(1)"></span>

                        </p>
                    </li>
                </ul>
            </div>

            <div class="details">
                <h3>商品详情</h3>
                <div class="msg">{{content}}</div>
            </div>

            <div class="details">
                <h3>物流说明</h3>
                <div class="msg">{{logistics}}</div>
            </div>

            <div class="details">
                <h3>售后服务</h3>
                <div class="msg">{{salesSupport}}</div>
            </div>

            <div class="details" style="padding-bottom:6.4rem;">
<!--                 <h3>联系客服</h3>
                <div class="msg"><i class="icon-qq mr10"></i>客服方方 753113213</div> -->
            </div>
                   
        </div>
        <div class="btnbox">
            <ul class="h_box">
                <li>{{payintegral}}<em>积分</em> <span v-if="integral > payintegral">{{integral}}积分</span></li>
                <li class="buy" @click="submit(dataAll.id,dataAll.paidIntegral)">兑换</li>
            </ul>
        </div>

    </div>


    <script>
        function setFontSize(){
            document.documentElement.style.fontSize = document.documentElement.clientWidth/375*10+"px";
        }
        setFontSize();
        window.onresize = function(){
            setFontSize();
                
        };
    </script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-resource1.3.4.js"></script>
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    <script>

        var vm = new Vue({
            el: '#buybox',
            data:{
              title:'',
              salesSupport:'',
              logistics:'',
              content:'商品详情',
              viewCount:'',
              commentCount:'',
              dataAll:[],
              payintegral:'',
              integral:'',
              count:2,
              receiptAddress:'',
              userId:'',
              stock:'',
              merchandiseClasses:'',
              url:[]

            },
            component:{
              
            },
            created:function(){
                var $this = this;
                this.$http.post('/fotile-api-0.0.2/merchandise/detail',{"id":522}).then(function(data){
                    var data = data.data;
                    if(data.status == 200){
                        $this.logistics = data.data.logisticsDesc;
                        $this.salesSupport = data.data.salesSupport;
                        $this.content = data.data.content;
                        $this.title = data.data.title;
                        $this.viewCount = data.data.viewCount;
                        $this.commentCount = data.data.commentCount;
                        $this.dataAll = data.data;
                        $this.payintegral = data.data.paidIntegral;
                        $this.stock = data.data.stock;
                        $this.merchandiseClasses = data.data.selectMerchandiseClass;
                        $this.url = data.data.merchandisePictures;
                    }
                    
                },function(){
                    console.info('error');
                });

            },
            methods:{
                submit:function(id, b){
                    //fotile-api-0.0.2/order/createByIntegral
                    var flag = confirm("确认兑换该商品吗？");
                    if(!flag)return;
                    var $this = this;
                    this.userId =85908;
                    this.getAddress(this.userId);

                },
                getAddress:function(userId,back){
                    var $this = this;                    
                    this.$http.post('/fotile-api-0.0.2/receiptAddress/default',{"userId":this.userId}).then(function(data){                        
                        $this.receiptAddress = data.data.data.id;
                        console.info($this.receiptAddress);
                        $this.submitFn($this.receiptAddress);

                    },function(err){

                    });
                },
                submitFn:function(address){
                    var $this = this;
                    this.$http.post('/fotile-api-0.0.2/order/createByIntegral',{
                        'userId':$this.userId,
                        'receiptAddressId':address,
                        'productId':$this.dataAll.id,
                        'count':$this.count,
                        'classId':$this.merchandiseClasses

                    }).then(function(data){
                        console.info(data.status);
                        if(data.status == 200){
                            alert('兑换成功');
                        }
                    },function(err){

                    });
                },
                selectType:function(classid,stock,paidIntegral,integral,item){
                    var $this = this;
                    //console.info(item);
                    $this.merchandiseClasses = classid;
                    $this.stock = stock;
                    $this.payintegral = paidIntegral;
                    $this.integral = integral;
                    $this.url.length = 0;
                    $this.url.push(item);
                    //console.info(item.picture.path);

                },
                changeNum:function(type){
                    if(type==0 ){
                        this.count = this.count -1 >1?this.count-1 : 1;
                    }else{
                        this.count = this.count +1 > this.stock?this.stock:this.count+1;
                    }
                }

            }
        });


    </script>



    
    
    

  </body>
</html>